<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12指令_自定义指令</title>
</head>
<body>
<!--
1. 注册全局指令
    Vue.directive('my-directive',function(el, binding)){
        el.innerHTML = binding.value.toupperCase()
    }
2. 注册局部指令
    directives: {
        'my-directive' : {
            bind(el,bind){
                el.innerHTML = binding.value.toupperCase()
            }
        }
    }
3. 使用指令
    v-my-directive='xxx'
-->

<!--
需求：自定义两个指令
    1.功能类型于v-text,但转换为全大写   v-upper-text
    2.功能类型于v-text,但转换为全小写   v-lower-text
-->
<div id="test1">
    <p v-upper-text="msg1"></p>
    <p v-lower-text="msg1"></p>
</div>
<p>-----------------</p>
<div id="test2">
  <p v-upper-text="msg2"></p>
  <p v-lower-text="msg2"></p>
</div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      //定义全局指令
      //el: 指令属性所在的标签对象
      //binding: 包含指令相关信息数据的对象
      Vue.directive('upper-text',function (el, binding) {
        console.log(el,binding);
        el.textContent = binding.value.toUpperCase();
      });

      new Vue({
        el:'#test1',
        data:{
          msg1:'NBA I Love This Game!'
        },
        directives:{    //注册局部指令，只在当前vm管理范围有效
          // 'lower-text':function (el, binding) {
          'lower-text'(el, binding) {   //es6语法
            el.textContent = binding.value.toLowerCase();
          }
        }
      });

      new Vue({
        el:'#test2',
        data:{
          msg2:'Just Do It !'
        }
      });
    </script>
</body>
</html>
